<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery实现模板代码</title>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="main">1</div>
<div style="display: none">
    <div id="template">
        <h1 class="id id1"></h1>
        <h2 class="name name1"></h2>
        <h3 class="age age1"></h3>
        <p class="chatQuestion dd-text"></p>
    </div>
</div>

<li style="margin: 15px 0;" class="chat-right">
    <dl>
        <dd>
            <p class="dd-text"></p>
            <h6>
                <time></time>
            </h6>
        </dd>
        <dt>
            <img src="../img/default-img.png">
        </dt>
    </dl>
</li>
<button onclick='playThis(this)'>
    <img class='audioImage' src='../img/play.png'/>
</button>

<div id="rongqi"></div>
<div id="rongqi1"></div>
<div id="rongqi2"></div>

<input class='playUrl' type='hidden' value='" + audioUrl + "'/><span></span>
</body>
<script>

    let obj = {
        id: 1,
        name: "s1",
        age: 11
    };

    let objArr = [
        {
            id: 1,
            name: "s1",
            age: 11
        },
        {
            id: 2,
            name: "s2",
            age: 22
        }
    ];

    let templateIdNumber = 1;

    const mainElement = $("#main");

    $(() => {
        addTemplate(objArr);
        console.log(replace(obj));
        test2();
        test3();
        test4();
        test5();

        teShuTemplate();
    });

    function addTemplate(obj) {
        $.each(obj, function (index, value) {
            let row = $("#template").clone(true);//.attr("id", "template" + (templateIdNumber++))
            row.find(".id").text(value.id);
            row.find(".name").text(value.name);
            row.find(".age").text(value.age);
            mainElement.append(row.children('*'));
        });
    }

    function replace(data) {
        let str = `
        <div>
            <h1>${data.id}</h1>
            <h1>${data.name}</h1>
            <h1>${data.age}</h1>
        </div>
        `;
        return str;
    }

    function test2() {
        let a = 1;
        let b = 2;
        let ee = `
        <h1>${b + a}</h1>
        `;
        let c = `${3 > 2 ? ee : b}`;
        console.log(c);
    }

    function logMessage(message) {
        console.log(message);
    }

    function test3() {
        let a = 2;
        let code = `
        <div>
        <button onclick="logMessage(${a})">点击一下</button>
        </div>
        `;
        $('#rongqi').append(code);
    }

    function test4() {
        let a = {
            name: 's1',
            age: 1
        };
        let code = `
        <div>
        <button onclick="logMessage('${a.name}')">点击一下1</button>
        </div>
        `;
        $('#rongqi1').append(code);
    }

    /**
     * 功能:
     *      尝试替在模板字符串中替换对象.
     * 结论:
     *      模板字符串最终会转换为字符串, 所以不能在其中替换对象, 只能展示字面值.
     */
    function test5() {
        let a = {
            name: 's1',
            age: 1
        };

        let code = `
        <div>
        <button onclick="log2(${a})">点击一下2</button>
        </div>
        `;
        console.log(code);
        $('#rongqi2').append(code);
    }

    function log2(obj) {
        console.log(obj.name, obj.age);
    }

    function teShuTemplate() {
        let b = '232';
        let c = '232';
        let str = `<p>(${b}), ${c}</p>`;
        console.log(str);
    }

</script>
</html>